<template>
  <div>
    <div class="search-group">
      <div class="search-item">
        <el-input v-model="query.roleName" placeholder="请输入角色名" />
      </div>
      <el-button-group>
        <el-button type="primary" icon="el-icon-plus" @click="add()" />
        <el-button icon="el-icon-search" @click="search" />
        <el-button icon="el-icon-refresh" @click="reset" />
      </el-button-group>
    </div>
    <div class="content">
      <el-table v-loading="table.loading" :data="table.data" border style="width: 100%">
        <el-table-column align="center" label="id" prop="id" />
        <el-table-column align="center" label="角色名" prop="roleName" />
        <el-table-column align="center" label="操作" fixed="right" width="100px">
          <template slot-scope="{row}">
            <el-button-group class="operation">
              <el-button v-permission="['sys_role:list']" type="text" @click="edit('see',row.id)">详情</el-button>
              <!--                                <el-button type="text" v-permission="['sys_role:subTableData:list']" @click="openRoleMenu(row.id)">角色菜单</el-button>-->
              <el-button v-permission="['sys_role:edit']" type="text" @click="edit('edit',row.id)">编辑</el-button>
              <c-button v-permission="['sys_role:delete']" type="text" auto-confirm @confirm="remove(row.id)" />
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
      <table-page :total="table.total" :current="query.pageNum" :size="query.pageSize" @settingTablePage="settingTablePage" />
    </div>
    <Edit ref="edit" @refreshPageData="search" />
    <OneToManyTable ref="oneToManyTable" />
  </div>
</template>

<script>
import { deleteById, getByPage } from '@/api/modules/system/sysRoleApi'
import Edit from '@/views/modules/system/sysRole/operation/sysRoleEdit'
import OneToManyTable from '@/views/modules/system/sysRole/operation/sysRoleOneToManyTable'
import TablePage from '@/components/tablePage'
import CButton from '@/components/confirmButton/CButton'

export default {
  name: 'SysRole',
  components: { CButton, TablePage, Edit, OneToManyTable },
  data() {
    return {
      query: {
        pageNum: 1,
        pageSize: 10,
        roleName: null
      },
      table: {
        data: null,
        total: null,
        loading: false
      }
      /* 字典表数据*/
    }
  },
  created() {
    this.getTableData()
  },
  methods: {
    search() {
      this.query.pageNum = 1
      this.getTableData()
    },
    add() {
      this.$refs['edit'].open('add', null)
    },
    settingTablePage(pageNum, pageSize) {
      this.query.pageNum = pageNum
      this.query.pageSize = pageSize
      this.getTableData()
    },
    reset() {
      this.query.roleName = null
      this.search()
    },
    getTableData() {
      this.table.loading = true
      getByPage(this.query).then(res => {
        this.table.total = res.total
        this.table.data = res.rows
        this.table.loading = false
      })
    },
    edit(optionType, id) {
      this.$refs['edit'].open(optionType, id)
    },
    openRoleMenu(id) {
      this.$refs['oneToManyTable'].open(id)
    },
    remove(id) {
      deleteById(id).then(res => {
        this.$message.success('删除成功')
        this.search()
      })
    }
  }
}
</script>

<style scoped>

</style>
